<template>
  <div class="wrap">
    <div class="header">
      <div class="banner">
        <div id="icon" @click="btnIcon">
          <van-icon name="arrow-left" />
        </div>
        <div id="text">
          <div id="success-icon">
            <van-icon name="checked" color="#ffffff" />
          </div>
          <div id="success-text">提交成功</div>
        </div>
      </div>
      <div class="head-title">
        <p id="title">您的预约结果可在</p>
        <p id="text">【我的】— 【我的预约】 查看</p>
      </div>
    </div>
    <div class="main">
      <div class="banner"></div>
      <div class="title-middle">
        <div id="left-line"></div>
        <div id="text">精选推荐</div>
        <div id="right-line"></div>
      </div>
      <ul class="content">
        <li
          v-for="(item, index) in dataList"
          :key="index"
          id="li-list"
          @click="btnDetail(item)"
        >
          <div id="head-img">
            <img :src="item.goods_img" id="images" />
          </div>
          <div id="title-text">
            {{ item.sell_name }}
          </div>
          <div id="middle">
            {{ item.simple_desc }}
          </div>
          <div id="bottm">
            <div id="prize">
              ￥<span>{{ item.sale_price }}</span>
            </div>
            <div id="number">{{ item.sell_count }}人付款</div>
          </div>
          <div class="btnAdd">
            <img src="../../../assets/images/presale/addPres.png" id="images" />
          </div>
        </li>
      </ul>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
import { shoppingList } from "@/api/presale/successfully";

export default {
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.shoppingListPost();
  },
  methods: {
    btnIcon() {
      this.$router.go(-1);
    },
    // 预约登记
    shoppingListPost() {
      shoppingList()
        .then((res) => {
          if (res.data.err_code == 0) {
            console.log("res", res);
            this.dataList = res.data.data.data;
          } else {
            console.log("error，接口请求失败！");
          }
        })
        .catch((err) => {
          console.log("接口出错", err);
        });
    },
    href(uri, blank = true) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = uri;
      if (blank) a.setAttribute("target", "_blank");
      document.body.appendChild(a);
      a.click();
      setTimeout((t) => {
        document.body.removeChild(a);
      }, 0);
    },
    btnDetail(item) {
      console.log("item", item.id);
      this.href =
        "yfd://yfdmall:8080/goodsDetail?spuId=" + `${item.id}`;
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  overflow: hidden;
  width: 100%;
  font-family: Arial, Helvetica;
  font-size: 14px;
  background: #f2f2f2;
  .header {
    width: 100%;
    height: 180px;
    background: linear-gradient(316deg, #892385 0%, #ed2e61 100%);
    .banner {
      height: 60px;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: center;
      #icon {
        padding-left: 10px;
        font-size: 20px;
        color: #ffffff;
      }
      #text {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 107px;
        #success-icon {
          opacity: 0.65;
          font-size: 26px;
          padding-top: 8px;
        }
        #success-text {
          font-weight: bold;
          color: #ffffff;
          font-size: 20px;
          padding-left: 4px;
        }
      }
    }
    .head-title {
      width: 100%;
      line-height: 40px;
      text-align: center;
      color: #ffffff;
      font-size: 14px;
      margin: 0 auto;
      #title {
        margin-top: 20px;
      }
      #text {
        margin-top: -30px;
      }
    }
  }
  .main {
    width: 100%;
    .banner {
      width: 100%;
    }
    .title-middle {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-top: 26px;
      #left-line {
        width: 114px;
        height: 1px;
        background: linear-gradient(
          316deg,
          #892385 0%,
          rgba(237, 46, 97, 0) 100%
        );
        opacity: 0.31;
        margin-top: 11px;
      }
      #text {
        font-size: 16px;
        font-weight: 600;
        color: #9b9b9b;
        line-height: 22px;
        background: linear-gradient(316deg, #aa0088 0%, #ed2e61 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-top: 10px;
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
      }
      #right-line {
        width: 114px;
        height: 1px;
        background: linear-gradient(
          316deg,
          #892385 0%,
          rgba(237, 46, 97, 0) 100%
        );
        opacity: 0.31;
        margin-top: 11px;
      }
    }
    .content {
      width: 92%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding-top: 20px;
      #li-list {
        flex-basis: 48%;
        width: 172px;
        min-height: 216px;
        background: #ffffff;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        padding-bottom: 8px;
        position: relative;
        #head-img {
          width: 100px;
          height: 100px;
          padding-top: 8px;
          #images {
            width: 100px;
            height: 100px;
          }
        }
        #title-text {
          width: 154px;
          height: 34px;
          font-size: 13px;
          padding-top: 5px;
          font-weight: 400;
          color: #1e2022;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        #middle {
          width: 154px;
          height: 28px;
          font-size: 10px;
          font-weight: 400;
          color: #b2b2b2;
          padding-top: 7px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        #bottm {
          width: 154px;
          text-align: left;
          display: flex;
          flex-direction: row;
          align-items: center;
          padding-top: 10px;
          #prize {
            color: #d52323;
            font-size: 10px;
            span {
              font-size: 14px;
              font-weight: 400;
            }
          }
          #number {
            font-weight: 400;
            color: #c3c3c3;
            font-size: 9px;
            padding-left: 5px;
          }
        }
        .btnAdd {
          width: 23px;
          height: 23px;
          position: absolute;
          bottom: 0;
          right: 0;
          #images {
            width: 23px;
            height: 23px;
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 40px;
  }
}
</style>